<template>
	<view class="number-list" @click="handleKeyBoard">
		<view class="item" :class="{active:keyBoardIndex==index}" v-for="(item,index) in 7" :key="index"
			@click="handleActivity(index)">
			<text>{{list[item-1]}}</text>
		</view>
		<view class="tag" :class="{activeTag:keyBoardIndex==7}" @click="handleActivity(7)">
			<text class="r" v-if="list[7]">{{list[7]}}</text>
			<text class="l" v-else>新能源</text>
		</view>
	</view>
	<keyboard-package :disableDot="true" :active="active" @input="getKeyBoard" @onConfirm="onConfirm" safeAreaInsetBottom :type="keyboardType"   ref="keyboard"></keyboard-package>
	
</template>

<script setup>
	import keyboardPackage from '@/components/keyboard-package/keyboard-package.vue'
	const prop = defineProps({
		keyvalue:String
	})
	console.log(prop.keyvalue)
	import {
		ref,
		defineEmits,
		watch
	} from "vue";
	const emit = defineEmits(['confirm-key']);
	watch(()=>prop.keyvalue,(nv,ov)=>{
		list.value = nv.toString().split('')
		console.log(list.value )
	},{once:true})
	const onConfirm = ()=>{
		let str = ''
		if(list.value.length){
			list.value.map(item=>{
				str+=item
			})
		}
		emit('confirm-key',str)
	}
	
	const list = ref([])
	const keyboard = ref()
	const keyboardType = ref(3)
	const keyBoardIndex = ref(-1)
	const active = ref(1)
	const handleKeyBoard = ()=>{
		keyboard.value.open()
	}
	/** 获取键盘的数据 */
	const getKeyBoard = (e)=>{
		console.log(e)
		if(e==-1){
			if(keyBoardIndex.value>=0){
				list.value[keyBoardIndex.value]=""
				keyBoardIndex.value--
				if(keyBoardIndex.value==0) {
					active.value = 2	
				} 	
			}
			return false
		}
		list.value[keyBoardIndex.value] = e
		if(keyBoardIndex.value >= 7){
			console.log(list.value)
			return false
		}
		keyBoardIndex.value++
		if(keyBoardIndex.value>0){
			active.value = 1
		}
	}
	/** 点击某项 */
	const handleActivity = (index)=>{
		keyBoardIndex.value = index
		if(index==0){
			active.value = 2
		}else{
			active.value = 1
		}
	}
</script>

<style lang="scss" scoped>
	.number-list {
		display: flex;
		margin: 0 30rpx;

		.item {
			width: 73rpx;
			height: 95rpx;
			background: #F3F3F3;
			border-radius: 12rpx;
			border: 1px solid #DFDFDF;
			margin-right: 9rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				font-size: 32rpx;
				color: #2b2b2b;
			}
		}

		.active {
			border: 1px solid #FE9C24;
		}

		.tag {
			width: 73rpx;
			height: 95rpx;
			background: #E1F2E1;
			border-radius: 12rpx;
			border: 1px solid rgba(123, 194, 122, .5);
			display: flex;
			align-items: center;
			justify-content: center;

			.r {
				font-size: 32rpx;
				color: #7BC27A;
			}

			.l {
				writing-mode: vertical-lr;
				font-size: 20rpx;
				color: #7BC27A;
			}
		}

		.activeTag {
			border: 1px solid #7BC27A;
		}
	}
</style>